<template>
    <div class="residentregister">
        <div class="container">
            <!-- 头部信息 -->
            <header>
                <div class="search">
                    <Input
                        v-model.trim="Name"
                        placeholder="输入注册昵称/联系方式/公众号名称查询"
                        style="width: 250px;margin-right:10px;"
                        clearable
                    />
                </div>
                <Button type="primary" icon="ios-search" @click="getData(1)"></Button>
            </header>
            <!-- 列表 -->
            <div class="list">
                <Table  :columns="columns5" :data="list"></Table>
            </div>
            <Modal
                v-model="modal1"
                title="查看机构名称"
                footer-hide>
                <p>{{ content }}</p>
            </Modal>
        </div>
        <!--分页器-->
        <div class="page">
            <Page :total="registerSize" :current='pageNo' :page-size="pageSize" show-total show-elevator @on-change="pageChange"/>
        </div>
    </div>
</template>
<script>
// 用户注册信息查询
import api from "@/api/commonApi";
import { Page } from "view-design";
import fourLevelLinkage from "@/components/fourLevelLinkage";
export default {
    data() {
        return {
            province: null,
            city: null,
            area: null,
            hospital: null,
            registerSize: 0,
            pageSize: 10,
            pageNo: 1,
            list: [],
            Name: "",
            modal1:false,
            columns5:[
                {
                    title:"排序",
                    key:"sum",
                    align:"center",
                    width:60,
                    render: (h, params) => {
                        let sum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", sum);
                    }
                },
                {
                    title:"openID",
                    key:"openid",
                    align:"center",
                },
                {
                    title:"注册昵称",
                    key:"nickname",
                    align:"center",
                    // width:140
                },
                {
                    title:"联系方式",
                    key:"telephone",
                    align:"center",
                },
                {
                    title:"注册来源",
                    key:"appNick",
                    align:"center",
                },
                {
                    title:"注册时间",
                    key:"createTime",
                    align:"center",
                }
            ]
        };
    },
    created() {
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/maintain/indexManagement/index",
                title: "索引管理"
            },
            {
                path: "/index/maintain/residentregister/list",
                title: "用户注册信息查询"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted() {
        this.getData(1);
    },
    methods: {
        changeProvince(val) {
            this.province = val;
        },
        changeCity(val) {
            this.city = val;
        },
        changeArea(val) {
            this.area = val;
        },
        changeHospital(val) {
            this.hospital = val;
        },
        pageChange(index) {
            this.pageNo = index;
            this.getData(index);
        },
        simples (content){
            this.content = content;
            this.modal1 = true
        },
        getData(pageNo) {
            this.pageNo = pageNo;
            let params = {
                pageNo,
                pageSize: 10
            };
            if (this.Name != "") {
                params.searchKey = this.Name.trim();
            }
            params.provinceCode = this.province ? this.province : null;
            params.cityCode = this.city ? this.city : null;
            params.areaCode = this.area ? this.area : null;
            params.hospitalId = this.hospital ? this.hospital : null;
            this.$axios.post(api.findDhtbwWxUser, params).then(res => {
                if (res.data.code) {
                    let ret = res.data.object;
                    this.registerSize = ret.total;
                    if (ret.records) {                        
                        ret.records.forEach((item,index) =>{
                            item.sum = this.addZeros(index)
                        })
                        this.list = ret.records;
                    } else {
                        this.registerSize = 0;
                        this.list = [];
                        this.$Message.info("查询结果为空");
                    }
                } else {
                    this.$Message.info("不允许访问");
                }
            });
        }
    },
    components: {
        Page,
        fourLevelLinkage
    }
};
</script>
<style lang="less" scoped>
.residentregister {
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .container {
        width: 100%;
        margin: 0 auto;
        header {
            width: 100%;
            height: 40px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .list {
            width: 100%;
            margin: 10px 0;
        }
    }
    .page {
        width: 100%;
        margin: 10px auto;
        text-align: center;
    }
}
</style>